import React, { useState, useRef, useEffect, useImperativeHandle } from "react";

// class Child extends React.Component {
//   state = {
//     a: 2,
//     b: 3,
//   };
//   render() {
//     return <div>我是类子组件</div>;
//   }
// }

// const Child = React.forwardRef(function Child(props, ref) {
//   return <div ref={ref}>我是函数子组件</div>;
// });

// 函数组件内部，可以有自己的状态和方法：如何实现：基于forwardRef实现ref的同时，获取函数组件内部的状态
// 和方法 ？ => useImperativeHandle
function Child(props, ref) {
  const [text, setText] = useState("你好世界");
  const submit = () => {};
  const sonRef = useRef();
  useImperativeHandle(
    ref,
    () => {
      return {
        text,
        submit,
        sonRef,
      };
    },
    []
  );
  return (
    <div ref={sonRef}>
      <span>我是函数子组件</span>
    </div>
  );
}

function Demo() {
  const x = useRef(null);

  useEffect(() => {
    console.log(x.current.sonRef.current);
  }, []);

  //   基于forwardRef 实现 ref 转发 ，目的：获取子组件内部的某个元素
  Child = React.forwardRef(Child);

  return (
    <div className="demo">
      <Child ref={x} title="我是标题" />
    </div>
  );
}

export default Demo;
